<template>
  <BasicModal v-bind="$attrs" title="批量导入" @register="registerModal">
    <div class="textHtml">
      <p>EXCEL导入文件标准：</p>
      <p>只导入第一个sheet页，导入从第二行开始</p>
      <p class="indent">第一列：属性名称（点名）</p>
      <p class="indent"> 第二列：地址</p>
      <p class="indent">第三列：系数(缩放比例)</p>
      <p class="indent"> 第四列：数据类型</p>
      <p class="indent"> 第五列：开始地址</p>
      <p class="indent">第六列：长度</p>
      <p class="indent">第七列：字节序(填写1234，12345678，注意对应数据类型，不填写就走默认顺序)</p>
      <p class="indent">第八列：读写控制（默认读）</p>
    </div>
    <div class="felx_end" @click="download">模板下载</div>
    <template #footer>
      <Button @click="closeModel" style="margin-right: 10px">取消</Button>
      <Upload
        name="file"
        :showUploadList="false"
        :multiple="false"
        :customRequest="handleImportExcel"
      >
        <Button type="primary">选择文件</Button>
      </Upload>
    </template>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicModal } from '/@/components/Modal';
  import { Upload, Button } from 'ant-design-vue';
  import { useModal } from '/@/components/Modal';
  import { importModelattrbute } from '/@/api/sys/gateway/gateway';
  import { useMessage } from '/@/hooks/web/useMessage';
  export default defineComponent({
    components: { BasicModal, Upload, Button },
    props: ['attribute_group_id', 'protocol_type'],
    emits: ['importsuccess'],
    setup(prop, { emit }) {
      const { createMessage } = useMessage();
      const [registerModal, { closeModal }] = useModal();
      const value = ref<string>(
        'EXCEL导入文件标准：<br>只导入第一个sheet页，导入从第二行开始第一列：属性名称（点名）第二列：地址第三列：系数(缩放比例)第四列：数据类型第五列：开始地址第六列：长度第七列：字节序(填写1234，12345678，注意对应数据类型，不填写就走默认顺序)第八列：读写控制（默认读）',
      );

      //  let URLAPI =
      //   'http://iot-dev.c9d1c973fa315470eb49b82764004d642.cn-hangzhou.alicontainer.com/api';

      let URLAPI = import.meta.env.VITE_GLOB_API_URL;
      //下载示例
      function download() {
        let apiUrl =
          URLAPI +
          '/device_mode/download_attribute_excel_example?protocol_type=' +
          prop.protocol_type;
        try {
          var elemIF = document.createElement('iframe');
          elemIF.src = apiUrl;
          elemIF.style.display = 'none';
          document.body.appendChild(elemIF);
        } catch (e) {
          createMessage.error('下载异常');
        }
      }

      /* 导入 */
      function handleImportExcel(info) {
        const formData = new FormData();
        formData.append('excel_file', info.file);
        formData.append('attribute_group_id', prop.attribute_group_id);
        importModelattrbute(formData).then((e) => {
          if (e.data.success) {
            emit('importsuccess');
            closeModal();
          }
        });
      }
      function closeModel() {
        closeModal();
      }
      return {
        download,
        registerModal,
        value,
        handleImportExcel,
        closeModel,
      };
    },
  });
</script>
<style scoped>
  .felx_end {
    width: 100%;
    text-align: right;
    color: blue;
    padding: 10px 10px 0px 0px;
  }
  .rowTitle {
    margin-bottom: 6px;
  }
  .textHtml {
    border: 1px solid #eee;
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;
  }
  .textHtml p {
    line-height: 20px;
    margin-bottom: 5px;
  }
</style>
